<template>
  <div class="stations-table">
    <div class="table-header">
      <h3 class="table-title">各工位最新数据</h3>
      <span class="total-count">共 {{ allStationsData.length }} 个工位</span>
    </div>
    
    <!-- 表格容器结构 -->
    <div class="table-container">
      <!-- 表头容器（固定） -->
      <div class="table-header-container">
        <div class="flex-row header-row">
          <div class="flex-cell cell-id">工位编号</div>
          <div class="flex-cell cell-name">工位名称</div>
          <div class="flex-cell cell-location">当前位置</div>
          <div class="flex-cell cell-task">任务编号</div>
          <div class="flex-cell cell-status">状态</div>
          <div class="flex-cell cell-time">操作时间</div>
        </div>
      </div>
      
      <!-- 内容滚动容器 -->
      <div class="table-body-container">
        <el-scrollbar class="table-scrollbar">
          <div class="flex-body">
            <template v-for="station in allStationsData" :key="station.id">
              <div class="flex-row body-row" :class="getRowClass(station)">
                <div class="flex-cell cell-id">{{ station.id }}</div>
                <div class="flex-cell cell-name">{{ station.name }}</div>
                <div class="flex-cell cell-location">
                  <span class="location-tag">{{ station.location || '-' }}</span>
                </div>
                <div class="flex-cell cell-task">{{ station.taskNo || '-' }}</div>
                <div class="flex-cell cell-status">
                  <span class="status-tag" :class="getStatusClass(station.status)">{{ getStatusText(station.status) }}</span>
                </div>
                <div class="flex-cell cell-time">{{ station.operateTime || '-' }}</div>
              </div>
            </template>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script setup>
// 脚本部分保持不变
import { ref, watch, onMounted } from 'vue';
import { ElScrollbar } from 'element-plus';

const props = defineProps({
  stationsData: {
    type: Array,
    required: false,
    default: () => []
  }
});

const allStationsData = ref([]);

const testStationsData = [
  {
    id: '1',
    name: '托盘进站-尺寸测量',
    location: '尺寸测量位',
    status: 2,
    taskId: 'T250822001',
    waybillId: 'WB87654321',
    containerId: 'CT1001',
    operateTime: '09:35:22'
  },
  {
    id: '2',
    name: '机械手抓取扫码校验',
    location: '机械手抓取位',
    status: 2,
    taskId: 'T250822001',
    waybillId: 'WB87654321',
    operateTime: '09:36:10'
  },
  {
    id: '3',
    name: '托盘包裹解绑',
    location: '纸箱成型位',
    status: 2,
    taskId: 'T250822001',
    waybillId: 'WB87654321',
    operateTime: '09:34:55'
  },
  {
    id: '4',
    name: '面单打印-输出',
    location: '打印面单位',
    status: 2,
    taskId: 'T250822001',
    waybillId: 'WB87654321',
    operateTime: '09:35:40'
  },
  {
    id: '5',
    name: '面单校验-确认',
    location: '校验面单位',
    status: 2,
    taskId: 'T250822001',
    waybillId: 'WB87654321',
    operateTime: '-'
  },
  {
    id: '6',
    name: '上传客户系统',
    location: '已出站',
    status: 2, 
    taskId: 'T250822001',
    waybillId: 'WB87654321',
    operateTime: '09:33:20'
  }
];

const processStationsData = (data) => {
  allStationsData.value = [...data];
};

watch(
  () => props.stationsData,
  (newData) => {
    const dataToUse = newData.length > 0 ? newData : testStationsData;
    processStationsData(dataToUse);
  },
  { immediate: true, deep: true }
);

onMounted(() => {
  if (props.stationsData.length === 0) {
    processStationsData(testStationsData);
  }
});

const getStatusText = (status) => {
  const statusMap = {
    0: '-',
    1: 'OK',
    2: 'NG',
    3: 'NG'
  };
  return statusMap[status] || '未知';
};

const getStatusClass = (status) => {
  const classMap = {
    0: 'status-pending',
    1: 'status-completed',
    2: 'status-error',
    //1: 'status-running',
    //2: 'status-completed',
    //3: 'status-error'
  };
  return classMap[status] || 'status-pending';
};

const getRowClass = (station) => {
  return ''
  //return station.status === 1 ? 'row-running' : '';
};
</script>

<style scoped>
/* 表格基础样式保持不变 */
.stations-table {
  flex: 1;
  background: linear-gradient(145deg, rgb(12, 42, 95), rgb(8, 34, 82));
  border: 1px solid rgba(95, 158, 255, 0.3);
  border-radius: 0.6vw;
  box-sizing: border-box;
  box-shadow: 0 0.3vw 1vw rgba(0, 10, 30, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8vw;
  border-bottom: 1px solid rgba(95, 158, 255, 0.2);
  position: relative;
  z-index: 10;
}

.table-title {
 font-size: clamp(16px,1.1vw,18px);
  font-weight: 600;
  color: #8ec5fc;
  margin: 0;
}

.total-count {
  font-size: 0.8vw;
  color: #8ec5fc;
  padding: 0.2vw 0.6vw;
  background: rgba(15, 45, 100, 0.3);
  border-radius: 0.3vw;
}

.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
   padding: 0px 12px 12px;
  box-sizing: border-box;
}

.table-header-container {
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(95, 158, 255, 0.3);
  position: relative;
  z-index: 5;
}

.table-body-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.table-scrollbar {
  height: 100%;
  width: 100%;
}

/* Flex布局核心样式 */
.flex-row {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  min-width: 0; /* 解决flex子元素溢出问题 */
}

.header-row {
  background: rgba(10, 36, 85, 0.9);
}

.body-row {
  border-bottom: 1px solid rgba(95, 158, 255, 0.15);
}

.flex-cell {
  padding: 0.7vw;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1; /* 允许收缩 */
  flex-grow: 0; /* 默认不自动扩展 */
}

/* 列宽比例分配（核心修改） */
.cell-id {
  flex-basis: 10%; /* 工位编号占比 */
}

.cell-name {
  flex-basis: 20%; /* 工位名称占比（内容较长，分配更多空间） */
}

.cell-location {
  flex-basis: 18%; /* 当前位置占比 */
}

.cell-task {
  flex-basis: 18%; /* 任务编号占比 */
}

.cell-status {
  flex-basis: 12%; /* 状态占比 */
}

.cell-time {
  flex-basis:auto /* 操作时间占比 */
}

/* 表头和内容样式保持一致 */
.header-row .flex-cell {
  font-size: clamp(9px,0.7vw,14px);
  font-weight: 600;
  color: #8ec5fc;
}

.body-row .flex-cell {
  font-size: clamp(0.7vw,0.8vw,14px);
  color: #e0f0ff;
}

/* 状态和位置标签样式保持不变 */
.status-tag {
  display: inline-block;
  padding: 0.2vw 0.5vw;
  border-radius: 0.2vw;
  font-size: 0.75vw;
  font-weight: 500;
}

.status-pending {
  background: rgba(100, 149, 237, 0.2);
  color: #b0c4de;
}

.status-running {
  background: rgba(255, 215, 0, 0.2);
  color: #fffacd;
}

.status-completed {
  background: rgba(50, 205, 50, 0.2);
  color: #98fb98;
}

.status-error {
  background: rgba(255, 99, 71, 0.2);
  color: #ffccd5;
}

.location-tag {
  display: inline-block;
  padding: 0.2vw 0.5vw;
  background: rgba(100, 149, 237, 0.15);
  color: #8ec5fc;
  border-radius: 0.2vw;
  font-size: 0.8vw;
}

/* 行样式保持不变 */
.row-running {
  background: rgba(255, 215, 0, 0.05);
  border-left: 3px solid #ffd700;
}

.body-row:hover {
  background: rgba(100, 149, 237, 0.05);
}

/* 响应式调整 - 在小屏幕上优化显示 */
@media (max-width: 1200px) {
  .cell-name {
    flex-basis: 22%; /* 名称占比略增 */
  }
  .cell-id {
    flex-basis: 8%; /* 编号占比略减 */
  }
  .cell-time {
    flex-basis: 13%; /* 时间占比略减 */
  }
}
</style>